<template>
	<view class="month-card-content-container">
		 <!-- 12个月份 -->
		<view class="month-card-content-item-container" v-if="showMonthFlag">
			<!-- 每个月份 -->
			<view :class="['month-card-content-item-content', {'selected': item.selected}]" v-for="(item, index) in monthList" :key="index" @touchend="maskTouchend(arguments, item, index)" @click="selectMonth(item, index)">
				<view class="month-card-content-item-content-up-month">{{item.name}}</view>
				<view class="month-card-content-item-content-down-container">
					<view class="month-card-content-item-content-down-income">{{item.pay ? "¥ " + item.pay : ""}}</view>
					<view class="month-card-content-item-content-down-pay">{{item.income ? "¥ " + item.income : ""}}</view>
				</view>
			</view>
		</view>
		<!-- 下面三个显示金额 -->
		<view :class="['month-card-content-money-container', {'padding-top-container': !showMonthFlag}, {'no-padding-top-container': showMonthFlag}]">
			<view class="month-card-content-money-income-container">
				<view class="month-card-content-money-up-name">收入</view>
				<view class="month-card-content-money-down-money">{{billResultVo.incomeMoney ? "¥ " + billResultVo.incomeMoney : "0"}}</view>
			</view>
			<view class="month-card-content-money-pay-container">
				<view class="month-card-content-money-up-name">支出</view>
				<view class="month-card-content-money-down-money">{{billResultVo.payMoney ? "¥ " + billResultVo.payMoney : "0"}}</view>
			</view>
			<view class="month-card-content-money-surplus-container">
				<view class="month-card-content-money-up-name">结余</view>
				<view class="month-card-content-money-down-money">{{billResultVo.balances ? "¥ " + billResultVo.balances : "0"}}</view>
			</view>
		</view>
	</view>
</template>
<script>
	//导入draggable组件
	// import draggable from 'vuedraggable'
	export default {
		props: {
			showMonthFlag: {							// 是否显示月份
				type: Boolean,
				default: true
			},
			billResultVo: {
				type: Object,
				default: () => {},
			},
			month: {
				type: Number,
				default: "",
			}
		},
		watch: {
			billResultVo: {
				immediate: true,
				handler (old, news) {
					console.log("旧数据", old);
					console.log("新数据", news);
					this.handlerMonth();
				}
			}
		},
		name: 'card',
		data() {
			return {
				times: 0,								// 初始化使用
				touchNum: 0,							// 用于判断是单击还是双击
				monthList: [],							// 月份数据（包含总的收入，支出，结余）
			};
		},
		methods: {
			/**
			 * 将数据按照月份分组，然后遍历当前的月份数据，从中取出对应的值
			 */
			handlerMonth() {
				// var map = this._.groupBy(this.billResultVo.billOtherVoList, "month");
				// 后端已经分好组，只需要根据月份取出数据即可
				this.monthList.forEach(item => {
					if (this.billResultVo && this.billResultVo.yearBillOtherVoMap && this.billResultVo.yearBillOtherVoMap[item.name]) {
						item.pay = this.billResultVo.yearBillOtherVoMap[item.name].pay;
						item.income = this.billResultVo.yearBillOtherVoMap[item.name].income;
					} else {
						item.pay = "";
						item.income = "";
					}
					item.selected = item.name == this.month;
				})
				this.$forceUpdate();
			},
			/** 单双击事件
			 * @param {Object} argument 函数本身参数（若是框架回调）
			 * @param {Object} item 点击对象
			 * @param {Object} index 索引
			 */
			maskTouchend(argument, item, index){
				this.touchNum++;
				setTimeout(()=>{
					if(this.touchNum == 1){
						console.log('单击');
						// console.log(argument, "argument");
						// console.log(item, "item");
						// console.log(index, "index");
						// this.monthList.forEach((item, index1) => item.selected = index1 == index);
						// this.selectMonth(item, index);
						this.$emit("selectMonth", item, index);
					}
					if(this.touchNum >= 2){
						console.log('双击');
						this.$emit("doubleClick", item, index);
					}
					this.touchNum = 0
				},250)
			},
			/** 点击某个月份
			 * @param {Object} item 月份数据
			 * @param {Object} index 索引
			 */
			selectMonth(item, index) {
				this.monthList.forEach((item, index1) => item.selected = index1 == index);
			}
		},
		mounted(){
			this.monthList = [];
			for (var i = 0; i < 12; i++) {
				this.monthList.push({
					id: i + 1,
					name: i + 1,
					selected: false
				})
			}
			var that = this;
			setTimeout(() => {
				that.handlerMonth();
			}, 300);
		},
	};
</script>
<style lang="scss">
	.month-card-content-container {
		width: 670rpx;
		min-height: 105rpx;
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 30rpx;
		box-shadow: 0px 0px 2px #dfdede;
		
		
		.month-card-content-item-container {
			width: 100%;
			height: 245rpx;
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			gap: 10rpx;
			padding: 20rpx;
			box-sizing: border-box;
			
			.month-card-content-item-content {
				width: 96rpx;
				height: 99rpx;
				background-color: $themeBgcLightGreyColor;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				
				.month-card-content-item-content-up-month {
					width: 100%;
					height: 40%;
					text-align: center;
					font-size: 25rpx;
					color: $themePurpleColor;
					font-weight: bold;
				}
				
				.month-card-content-item-content-down-container {
					width: 100%;
					height: 60%;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: center;
					
					.month-card-content-item-content-down-income {
						width: 100%;
						height: 50%;
						display: flex;
						align-items: flex-end;
						justify-content: center;
						color: $typefaceRedColor;
						font-size: 20rpx;
					}
					.month-card-content-item-content-down-pay {
						width: 100%;
						height: 50%;
						display: flex;
						align-items: flex-start;
						justify-content: center;
						color: $typefaceGreenColor;
						font-size: 20rpx;
					}
				}
			}
			
			.selected {
				background-color: $themeYellowColor;
			}
		}
		
		.padding-top-container {
			padding: 0rpx 20rpx 0rpx 20rpx;
		}
		
		.no-padding-top-container {
			padding: 0rpx 20rpx 0rpx 20rpx;
		}
			
		.month-card-content-money-container {
			width: 100%;
			height: 100rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			
			.month-card-content-money-income-container {
				width: 33%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				.month-card-content-money-up-name {
					font-size: 25rpx;
					color: $typefaceGreyColor;
				}
				.month-card-content-money-down-money {
					color: $typefaceGreenColor;
					font-weight: bold;
				}
			}
			
			.month-card-content-money-pay-container {
				width: 33%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				.month-card-content-money-up-name {
					font-size: 25rpx;
					color: $typefaceGreyColor;
				}
				.month-card-content-money-down-money {
					color: $typefaceRedColor;
					font-weight: bold;
				}
			}
			
			.month-card-content-money-surplus-container {
				width: 33%;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-end;
				
				.month-card-content-money-up-name {
					font-size: 25rpx;
					color: $typefaceGreyColor;
				}
				.month-card-content-money-down-money {
					color: $typefaceRedColor;
					font-weight: bold;
				}
			}
			
		}
	}
</style>
